<template>
  <div class="RegisterPage">
    <div class="common-layout">
      <el-container>
        <el-main>
          <FormModule @sendData="receiveData"></FormModule>
        </el-main>

        <el-aside width="50%">
          <PictureModule :receivedData="sharedData"></PictureModule>
        </el-aside>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { ref } from "vue";
import { ComponentSize, FormInstance, FormRules } from "element-plus";
import FormModule from "@/components/FormModule.vue";
import PictureModule from "@/components/PictureModule.vue";

let sharedData = ref(true);
const receiveData = (data: boolean) => {
  sharedData.value = data;
  // console.log(data);
  // console.log(sharedData);
};

interface RuleForm {
  pass: string;
  type: string[];
  email: string;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  pass: "",
  type: [],
  email: "",
});

const rules = reactive<FormRules<RuleForm>>({
  pass: [
    { required: true, message: "Please input password", trigger: "blur" },
    { min: 6, message: "Length greater than 6", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
el-main {
  position: relative;
  height: 100vh;
  width: 50%;
}

.backgroundPlant {
  position: relative;
  height: 100vh;
  background: no-repeat url(@/assets/plant2.png);
}

.textPart {
  position: absolute;
  bottom: 10%;
  width: 70%;
  left: 15%;
  text-align: center;
  background-color: rgba(105, 105, 105, 0.5);
  color: white;
}
</style>
